<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="order by dede58.com" />
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="./css/login.css">
		<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				/* 焦点离开文本框 */
				$("#username").blur(function() {
					if ($("#username").val().length == 0) {
						$("#username").css("border", "1px solid red");
						$("#username_span").html("用户名不能为空");
					} 
					//else {
					// 	$.ajax({
					// 		url: "/checkUsername",
					// 		type: "POST",
					// 		data: {
					// 			"username": username
					// 		},
					// 		success: function(data) {
					// 			//var str = JSON.stringify(data);
					// 			//alert(str);
					// 			var isExit = data.isExist;
					// 			//3根据返回的isExit动态显示信息
					// 			var usernameInfo = "";
					// 			if (isExit) {
					// 				//                 //该用户名存在
					// 				usernameInfo = "该用户名已经存在";
					// 				$("#username_span").css("color", "red");
					// 			} else {
					// 				usernameInfo = "该用户名可以使用";
					// 				$("#username_span").css("color", "green");
					// 			}
					// 			$("#username_span").html(usernameInfo);
					// 		},
					// 		dataType: "json",
					// 	});
					// }
				});
			
			$("#username").focus(function() {
				$("#username").css("border", "1px solid white");
				$("#username_span").html("");
			});
			/* 焦点离开文本框 */
			$("#password").blur(function() {
				if ($("#password").val().length == 0) {
					$("#password").css("border", "1px solid red");
					$("#password_span").html("密码不能为空");

				}
			});
			$("#password").focus(function() {
				$("#password").css("border", "1px solid white");
				$("#password_span").html("");
			});
			/* 焦点离开文本框 */
			$("#repassword").blur(function() {
				if ($("#repassword").val().length == 0) {
					$("#repassword").css("border", "1px solid red");
					$("#repassword_span").html("确认密码不能为空");

				}
			});
			$("#repassword").focus(function() {
				$("#repassword").css("border", "1px solid white");
				$("#repassword_span").html("");
			});
			/* 焦点离开文本框 */
			$("#tel").blur(function() {
				if ($("#tel").val().length == 0) {
					$("#tel").css("border", "1px solid red");
					$("#tel_span").html("填写下手机号吧，方便我们联系您！");

				}
			});
			$("#tel").focus(function() {
				$("#tel").css("border", "1px solid white");
				$("#tel_span").html("");
			});
			/* 焦点离开文本框 */
			$("#email").blur(function() {
				if ($("#email").val().length == 0) {
					$("#email").css("border", "1px solid red");
					$("#email_span").html("填写邮箱，我们会定期向您推送活动内容！");

				}
			});
			$("#email").focus(function() {
			$("#email").css("border", "1px solid white");
			$("#email_span").html("");
			});
			})

			function checkNull() {
				var num = 0;
				var str = "";
				$("input[type$='text']").each(function(n) {
					if ($(this).val() == "") {
						num++;
						str += $(this).attr("placeholder") + "!\r\n";
					}
				});
				if (num > 0) {
					alert(str);
					return false;
				} else {
					return true;
				}
			}
		</script>
	</head>
	<body class="body2">

		<!-- login -->
		<div class="top center">
			<div class="logo center">
				<br />
				<a href="./index.html" target="_blank"><img src="./image/logo.png" alt="" style="height: 5rem;"></a>
			</div>
		</div>
		<form method="post" action="" class="form2">
			<br />
			<div class="regist">
				<div class="regist_center">
					<div class="regist_top">
						<br />
						<div class="left fl">会员注册</div>
						<div class="right fr">您已经是我们的会员？<a href="./login.html" target="_self">前往登录</a></div>
						<div class="clear"></div>
						<div class="xian center"></div>
					</div>
					<div class="regist_main center">
						<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang"
								type="text" name="username" placeholder="请输入你的用户名" id="username"><span
								id="username_span"></span></div>
						<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input
								class="shurukuang" type="password" name="password" placeholder="请输入你的密码"
								id="password" /><span id="password_span"></span></div>

						<div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password"
								name="repassword" placeholder="请确认你的密码" id="repassword" /><span
								id="repassword_span"></span></div>
						<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang"
								type="text" name="tel" placeholder="请填写正确的手机号" id="tel" /><span id="tel_span"></span>
						</div>
						<div class="username">邮箱地址:&nbsp;&nbsp;<input class="shurukuang" type="text" name="email"
								placeholder="请填写正确的邮箱地址" id="email"><span id="email_span"></span></div>

						<div class="username">
							<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma"
									type="text" name="username" placeholder="请输入验证码" /></div>
							<div class="right fl"><img src="./image/yanzhengma.jpg"></div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="regist_submit">
						<input class="submit" type="submit" onclick="return checkNull()" value="立即注册">
					</div>

				</div>
			</div>
		</form>
		<footer>
			<div class="copyright">简体 | 繁体 | English | 常见问题</div>
			<div class="copyright">鲜焙蛋糕版权所有-京ICP备10046444-<img src="./image/ghs.png"
					alt="">京公网安备11010802020134号-京ICP证110507号</div>

		</footer>

	</body>
</html>
